<template>
  <div class="min-h serveProject bg-wt">
    <!-- 展示搜索框页面 -->
    <SearchForm
      :searchData="pagination"
      @handleClear="handleClear"
      @handleReset="handleReset"
      @handleSearch="handleSearch"
    ></SearchForm>

    <!--展示列表页面
    定义属性和方法
    -->
    <TableList
      :data="data"
      :total="total"
      :pagination="pagination"
      :data-loading="dataLoading"
      @onPageChange="onPageChange"
      @handleBulid="handleBulid"
      @handleEdit="handleEdit"
      @handleClickDelete="handleClickDelete"
      @handleClickDisable="handleClickDisable"
    ></TableList>
    <!-- 展示弹窗 -->
    <DialogForm
      ref="formRef"
      :title="title"
      :visible="visible"
      :data="formBaseData"
      @handleClose="handleClose"
      @handle-add="handleAdd"
      @handleEdit="handleEditForm"
    >
    </DialogForm>
    <Delete
      :visible="dialogDeleteVisible"
      :delete-text="deleteText"
      @handle-delete="handleDelete"
      @handle-close="handleClose"
    >
    </Delete>
    <Disable
      :visible="dialogDisableVisible"
      :confirmText="confirmText"
      :dataState="currrentData.status"
      @handleClick="handleDisable"
      @handle-close="handleClose"
    >
    </Disable>
  </div>
</template>

<script setup lang="jsx">
import { ref, onMounted } from 'vue'
import { MessagePlugin } from 'tdesign-vue-next'
import {
  getProjectList,
  projectAdd,
  getProjectDetails,
  projectUpdate,
  projectDelete,
  projectStatus
} from '@/api/serve'
import SearchForm from './components/SearchForm.vue'
import TableList from './components/TableList.vue'
import DialogForm from './components/DialogForm.vue'
import Delete from '@/components/OperateDialog/index.vue' // 删除弹层
import Disable from '@/components/OperateDialog/disable.vue' // 禁用启用弹窗

// 是否显示弹窗
const visible = ref(false)
const dialogDeleteVisible = ref(false)
const dialogDisableVisible = ref(false) // 控制禁用/启用弹层显示隐藏

// 定义子组件对象
const formRef = ref(null)
const title = ref('') // 弹窗标题

// 点击新增护理项目 按钮 把visible设置为true，弹出
const handleBulid = () => {
  title.value = '新增'
  visible.value = true
}

// 点击弹窗中的关闭或取消，关闭弹窗
const handleClose = () => {
  visible.value = false
  dialogDeleteVisible.value = false
  dialogDisableVisible.value = false
}

// 调用新增接口
const handleAdd = async (val) => {
  // 调用接口
  const res = await projectAdd(val)
  if (res.code === 200) {
    MessagePlugin.success('添加成功')
    // 查询列表
    getList()
    // 关闭弹窗
    handleClose()
    // 清理弹窗中的内容，方便下次使用
    formRef.value.handleClear()
  } else {
    MessagePlugin.error(res.msg)
  }
}
const data = ref([])
const total = ref(0)
const dataLoading = ref(false) // 加载中

// 重置搜索框
const handleReset = () => {
  // 重置页码
  pagination.value = {
    pageSize: 10,
    pageNum: 1
  }
  getList()
}
// 搜索
const handleSearch = () => {
  getList()
}
// 清空
const handleClear = (val) => {
  if (val === 'name') {
    delete pagination.value.name
  } else {
    delete pagination.value.status
  }
  getList()
}
const pagination = ref({
  pageSize: 10,
  pageNum: 1
})
// 生命周期
onMounted(() => {
  getList()
})

// 调用接口
const getList = async () => {
  const res = await getProjectList(pagination.value)
  data.value = res.data.records
  total.value = Number(res.data.total)
}

// 翻页设置当前页
const onPageChange = (val) => {
  pagination.value.pageNum = val.current
  pagination.value.pageSize = val.pageSize
  getList()
}

// 判断当前参数是否包含小数点
const isDecimals = (val) => {
  if (String(val).indexOf('.') > -1) {
    return true
  }
  return false
}

const formBaseData = ref({}) // 弹窗表单内容

// 修改数据
const handleEditForm = async (val) => {
  const res = await projectUpdate(val)
  if (res.code === 200) {
    MessagePlugin.success('编辑成功')
    getList()
    handleClose()
    formRef.value.handleClear()
  } else {
    MessagePlugin.error(res.msg)
  }
}
// 编辑
const handleEdit = (val) => {
  // 将弹窗的标题
  title.value = '编辑'
  // 获取详情
  getDetails(val.id)
  // 显示弹窗
  visible.value = true
}

// 获取详情数据
const getDetails = async (id) => {
  const res = await getProjectDetails(id) // 获取列表数据
  if (res.code === 200) {
    formBaseData.value = res.data
  }
}
const deleteText = ref('护理项目')
const delId = ref()
const handleClickDelete = (row) => {
  if (row.status === '0') {
    MessagePlugin.error('启用状态下不可删除')
  } else {
    delId.value = row.id
    dialogDeleteVisible.value = true
  }
}
const handleDelete = () => {
  dialogDeleteVisible.value = false
  // MessagePlugin.success('删除成功')
  delNursingHandle()
}
const delNursingHandle = async () => {
  await projectDelete(delId.value).then((res) => {
    if (res.code === 200) {
      MessagePlugin.success('删除成功！')
      getList()
    }
  })
}
const currrentData = ref({})
const confirmText = ref('护理项目')
// 点击禁用/启用
const handleClickDisable = (row) => {
  currrentData.value = row
  // confirmText.value = row.dataState === '0' ? '确认禁用' : '确认启用'

  dialogDisableVisible.value = true
}
// 确认禁用/启用
const handleDisable = () => {
  dialogDisableVisible.value = false
  disableNursingHandle()
}
const disableNursingHandle = async () => {
  projectStatus({
    id: currrentData.value.id,
    status: currrentData.value.status === 0 ? 1 : 0
  }).then((res) => {
    if (res.code === 200) {
      MessagePlugin.success(
        `${currrentData.value.status === 0 ? '启用' : '禁用'}成功`
      )
    }
    getList()
  })
}
// 禁用/启用部门
</script>
